
<template>
    <div>
        <p>count: {{num}}</p>
        <p>msg: {{massage}}</p>
        <h2>getter {{reverseMsg}}</h2>
        <button @click="add(2)">add</button>
        <button @click="asyncAdd(3)">asyncAdd</button>
        <!-- <h2>modules</h2>
        <p>{{products}}</p> -->
        <!-- <button @click="setPruduct([])">clear</button> -->
        <h2>-----------------</h2>
        <input type="number" :value="inputValue" @change="testInput">
    </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
    export default {
        data(){
            return {
                inputValue: 0
            }
        },
        computed:{
            // ...mapState(['count','msg'])
            ...mapState({
                num: 'count',
                massage: 'msg',
            }),
            ...mapGetters(['reverseMsg']),
            // ...mapState('products', ['products'])
        },
        methods:{
            ...mapMutations(['add']),
            // ...mapMutations('products', ['setPruduct']),
            ...mapActions(['asyncAdd']),
            testInput(e) {
                console.log(e.target.value);
            }
        },
    }
</script>
<style lang="scss" scoped>
    
</style>